/* 主布局容器 */
.main-layout {
  display: flex;
  min-height: calc(100vh - 80px); /* 减去顶部导航高度 */
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 自定义 Sider 样式 */
.custom-sider {
  background: #fff !important; /* 强制白色背景，与主题统一 */
  border-radius: 8px;          /* 圆角风格，与卡片一致 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻微阴影，增强层次感 */
  padding-top: 16px;
  overflow: hidden;
}

/* Sider 头部样式 */
.sider-header {
  display: flex;
  align-items: center;
  padding: 0 24px 16px;
  border-bottom: 1px solid #f0f0f0; /* 底部边框分隔 */
  margin-bottom: 8px;
}

.sider-header nz-icon {
  color: #1890ff; /* 图标使用主色 */
  margin-right: 8px;
}

.sider-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 索引列表样式 */
.index-list {
  padding: 0 16px; /* 左右内边距，避免内容贴边 */
}

/* 索引项样式 */
.index-item {
  padding: 10px 16px; /* 增大点击区域 */
  margin-bottom: 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #666;
  font-size: 14px;
}

/* 鼠标悬停效果 */
.index-item:hover {
  background-color: #f5f7fa;
  color: #1890ff;
}

/* 选中状态样式 */
.index-item.active {
  background-color: #e6f7ff; /* 主色浅色背景 */
  color: #1890ff;            /* 主色文字 */
  font-weight: 500;
}

/* 右侧正文区域样式 */
.content-main {
  flex: 1;
  padding: 32px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-left: 20px; /* 与 Sider 保持间距 */
}

/* 响应式适配（小屏） */
@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
    padding: 0 10px;
  }

  .custom-sider {
    width: 100% !important;
    margin-bottom: 20px;
  }

  .content-main {
    margin-left: 0;
    padding: 20px;
  }
}
